import { Select, DatePicker, Space } from "@arco-design/web-react";
import "./index.scss";
import { useEffect, useState } from "react";
import { dayjs } from "@/plugins/dayjs.plugin";

const { YearPicker } = DatePicker;
export type valueType = string | number;

interface OptionModel {
  label: string;
  value: valueType;
}

interface PropInt {
  month?: valueType;
  year?: valueType;
  onChange?: (value: string) => void;
  styles?: React.CSSProperties[];
}

const defaultProps: PropInt = {
  month: dayjs().month() + 1,
  year: dayjs().year() + "",
};

const Option = Select.Option;
const options: OptionModel[] = [];

const getMonthOptions = () => {
  for (let i = 1; i <= 12; i++) {
    options.push({
      label: `${i}月`,
      value: i,
    });
  }
};

getMonthOptions();
export default function YearMonthSelect(props: PropInt) {
  const propsmix = { ...defaultProps, ...props };

  const [month, setmonth] = useState<valueType>(propsmix.month!);
  const [year, setyear] = useState<valueType>(propsmix.year!);

  const onMonthChange = (value: valueType) => {
    setmonth(value);
  };
  const onYearChange = (value: valueType) => {
    setyear(value);
  };

  useEffect(() => {
    props.onChange && props.onChange(`${year}-${month}`);
  }, [month, year]);

  return (
    <div className="month-select">
      <Space>
        <Select
          triggerProps={{
            autoAlignPopupWidth: false,
            autoAlignPopupMinWidth: true,
            position: "bl",
          }}
          onChange={onMonthChange}
          placeholder="请选择"
          style={{
            width: "80px",
            ...(props.styles?.[0] || {}),
          }}
          value={month}
        >
          {options.map((option) => (
            <Option key={option.value} value={option.value}>
              {option.label}
            </Option>
          ))}
        </Select>

        <YearPicker
          value={year}
          onChange={onYearChange}
          triggerElement={
            <Select
              placeholder="请选择"
              style={{
                width: "120px",
                ...(props.styles?.[1] || {}),
              }}
              popupVisible={false}
              value={year}
            ></Select>
          }
        ></YearPicker>
      </Space>
    </div>
  );
}
